<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>SearchBox</title>
	<script type="text/javascript" src="../deviceTheme.js"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" 
		data-dojo-config="async: true, parseOnLoad: true"></script>

	<!-- This test shows a dojox.mobile.SearchBox used for filtering a data store
		which content is displayed by a dojox.mobile.EdgeToEdgeDataList. --> 

	<script type="text/javascript">
		require([
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/SearchBox",
			"dojo/ready",
			"dijit/registry",
			"dojo/data/ItemFileReadStore",
			"dojo/store/DataStore",
			"dojox/mobile/ScrollableView",
			"dojox/mobile/EdgeToEdgeDataList",
			"dojox/mobile/SimpleDialog",
			"dojox/mobile/RoundRect",
			"dojox/mobile/Button",
			"dojox/mobile/RadioButton",
			"dojox/mobile/Switch"
			], function(parser, mobile, compat, SearchBox, ready, registry, 
						ItemFileReadStore, DataStore, ScrollableView, 
						EdgeToEdgeDataList, RoundRect, Button, RadioButton, Switch){
							
			var static_data = { 
				items: [ 
					{label: "Alabama"},
					{label: "Alaska"},
					{label: "American Samoa"},
					{label: "Arizona"},
					{label: "Arkansas"},
					{label: "Armed Forces Europe"},
					{label: "Armed Forces Pacific"},
					{label: "Armed Forces the Americas"},
					{label: "California"},
					{label: "Colorado"},
					{label: "Connecticut"},
					{label: "Delaware"},
					{label: "District of Columbia"},
					{label: "Federated States of Micronesia"},
					{label: "Florida"},
					{label: "Georgia"},
					{label: "Guam"},
					{label: "Hawaii"},
					{label: "Idaho"},
					{label: "Illinois"},
					{label: "Indiana"},
					{label: "Iowa"},
					{label: "Kansas"},
					{label: "Kentucky"},
					{label: "Louisiana"},
					{label: "Maine"},
					{label: "Marshall Islands"},
					{label: "Maryland"},
					{label: "Massachusetts"},
					{label: "Michigan"},
					{label: "Minnesota"},
					{label: "Mississippi"},
					{label: "Missouri"},
					{label: "Montana"},
					{label: "Nebraska"},
					{label: "Nevada"},
					{label: "New Hampshire"},
					{label: "New Jersey"},
					{label: "New Mexico"},
					{label: "New York"},
					{label: "North Carolina"},
					{label: "North Dakota"},
					{label: "Northern Mariana Islands"},
					{label: "Ohio"},
					{label: "Oklahoma"},
					{label: "Oregon"},
					{label: "Pennsylvania"},
					{label: "Puerto Rico"},
					{label: "Rhode Island"},
					{label: "South Carolina"},
					{label: "South Dakota"},
					{label: "Tennessee"},
					{label: "Texas"},
					{label: "Utah"},
					{label: "Vermont"},
					{label: "Virgin Islands, U.S."},
					{label: "Virginia"},
					{label: "Washington"},
					{label: "West Virginia"},
					{label: "Wisconsin"},
					{label: "Wyoming"},
				]
			};
			
			// dojo.data store for dojox.mobile.EdgeToEdgeDataList
			dataStore = new ItemFileReadStore({data: static_data});
			// dojo.store for dojox.mobile.SearchBox
			store = new DataStore({store: dataStore});
		    
			searchBox = null;
			list = null;
			
			onSearch = function(results, query, options){
				// Callback when a search completes.
				list.setQuery(query);
			};
			
			// Shows the Search Options dialog.
			showOptions = function(dlg){
				registry.byId(dlg).show();
			}

			// Hides the Search Options dialog. Optionally, applies the new search options.
			hideOptions = function(dlg, applyOptions){
				registry.byId(dlg).hide();
				if(applyOptions){
					searchBox.ignoreCase = registry.byId("ignoreCaseSwitch").value == "on";
					searchBox.set("incremental", registry.byId("incrementalSwitch").value == "on");
					if (registry.byId("radioStartsWith").checked){
						searchBox.queryExpr = "${0}*";
					}else if(registry.byId("radioContains").checked) {
						searchBox.queryExpr = "*${0}*";
					}else if(registry.byId("radioIs").checked) {
						searchBox.queryExpr = "${0}";
					}
				}
			}
			
			ready(function(){
				searchBox = registry.byId("searchBox");
				list = registry.byId("list");
			});
		});
	</script>
	
	<style>
		.mblSimpleDialogButton {
			margin: 7px 0 0;
			width: 262px;
			font-size: 17px;
			font-weight: bold;
			opacity: 0.95;
		}
		.mblSimpleDialogButton2l {
			float: left;
			width: 127px;
			margin: 7px 0 0;
			font-size: 17px;
			font-weight: bold;
			opacity: 0.95;
		}
		.mblSimpleDialogButton2r {
			float: right;
			width: 127px;
			margin: 7px 0 0;
			font-size: 17px;
			font-weight: bold;
			opacity: 0.95;
		}
	</style>
</head>

<body style="visibility:hidden;background-color:#424142;">
	<div data-dojo-type="dojox.mobile.View" selected="true">
		<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">SearchBox</h1>
		
		<input data-dojo-type="dojox.mobile.SearchBox" type="search" id="searchBox"
			style="width:50%" 
			selectOnClick="true" placeHolder="Search" 
			data-dojo-props='store:store, searchAttr: "label", ignoreCase: true, incremental: true, pageSize:1, onSearch:onSearch'>
		<button style="float:right" onclick="showOptions('dlg_options')">Options</button>
		
		<div data-dojo-type="dojox.mobile.ScrollableView">
			<ul data-dojo-type="dojox.mobile.EdgeToEdgeDataList" id="list" 
				data-dojo-props='store:dataStore, query:{label: "*"}'></ul>
		</div>
	</div>
	
	<div id="dlg_options" data-dojo-type="dojox.mobile.SimpleDialog">
		<div class="mblSimpleDialogTitle">Search Options</div>
		<table style="width:100%">
			<tr>
				<td><span class="bold">Ignore case</span></td>
				<td style="text-align:left">
					<input type="checkbox" data-dojo-type="dojox.mobile.Switch" 
						id="ignoreCaseSwitch" value="on"></td>
			</tr>
			<tr>
				<td><span class="bold">Incremental</span></td>
				<td style="text-align:left">
					<input type="checkbox" data-dojo-type="dojox.mobile.Switch" 
						id="incrementalSwitch" value="on">
				</td>
			</tr>
			<tr>
				<td style="text-align:left">
					<input type="radio" id="radioStartsWith" data-dojo-type="dojox.mobile.RadioButton" 
						name="mobileRadio" value="Starts with" checked>
					<label for="rb1">Starts with</label>
				</td>
			</tr>
			<tr>
				<td style="text-align:left">
					<input type="radio" id="radioContains" data-dojo-type="dojox.mobile.RadioButton" 
						name="mobileRadio" value="Contains">
					<label for="rb2">Contains</label>
				</td>
			</tr>
			<tr>
				<td style="text-align:left">
					<input type="radio" id="radioIs" data-dojo-type="dojox.mobile.RadioButton" 
						name="mobileRadio" value="Is">
					<label for="rb3">Is</label>
				</td>
			</tr>
		</table>

		<button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2l" 
			onclick="hideOptions('dlg_options', false)">Cancel</button>
		<button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton2r mblBlueButton" 
			onclick="hideOptions('dlg_options', true)">OK</button>
	</div>
</body>
</html>
